<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="现有项目组" name="existing">
      <el-form :mode="existingForm" :inline="true" size="small" style="margin-left: 30px;">
        <el-form-item label="类别">
          <el-select v-model="existingForm.type" style="width: 150px;" clearable>
            <el-option value="lude" label="润滑"></el-option>
            <el-option value="maintain" label="保养"></el-option>
            <el-option value="check" label="点检"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader v-model="existingForm.deptId" :options="adminStore.deptList" :props="deptProp"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchExistingProject">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-divider type="dashed"></el-divider> -->
      <el-table :data="existingList">
        <el-table-column type="expand">
          <template #default="props">
            <div>
              <!-- <h3 style="margin-left: 9%">检查项明细</h3> -->
              <el-table :data="props.row.itemsList" style="width:80%;margin-left: 10%;" class="expand">
                <el-table-column align="center" label="项目名称" prop="name"></el-table-column>
                <el-table-column align="center" label="项目内容" prop="content"></el-table-column>
                <el-table-column align="center" label="备注" prop="remark"></el-table-column>
              </el-table>
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
        <el-table-column align="center" label="名称" prop="name"></el-table-column>
        <el-table-column align="center" label="类别" :filters="[
          { text: '润滑', value: 'lude' },
          { text: '点检', value: 'check' },
          { text: '保养', value: 'maintain' }
        ]" :filter-method="filterHandler">
          <template #default="{ row }">
            {{ row.type === 'lude' ? '润滑' : row.type === 'maintain' ? '保养' : '点检' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="归属部门" prop="deptId">
          <template #default="{ row }">
            {{ adminStore.deptSelectList.find(item => item.id === row.deptId)?.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button type="primary" plain size="small" @click="editexistProject(row)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="deleteProject(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="新增项目组" name="new">
      <NewAddProject :activeName="activeName"></NewAddProject>
    </el-tab-pane>
    <el-tab-pane label="编辑项目组" name="edit" v-if="activeName === 'edit'">
      <NewAddProject :check-data="checkData" @editCheck="handleFormData" @cancelEdit="cancelEdit"
        :activeName="activeName" edit="true">
      </NewAddProject>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { useAdminStore } from '@/stores';
import { getProject, delProject } from '@/api/equipment/tactics'
import { ref, h } from 'vue'
import NewAddProject from './components/NewAddProject.vue';
const adminStore = useAdminStore()
const deptProp = ref({
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false
})
const activeName = ref('existing')
// 现有项目组
const existingForm = ref({
  type: '',
  deptId: ''
})
const existingList = ref([])
getProject().then(res => {
  console.log(res)
  existingList.value = res.data.data
})
const checkData = ref({})
async function searchExistingProject() {
  await getProject(existingForm.value.type, existingForm.value.deptId).then(res => {
    console.log(res)
    existingList.value = res.data.data
  })
}
function editexistProject(row) {
  console.log(row)
  activeName.value = 'edit'
  checkData.value = row
}
async function deleteProject(row) {
  console.log(row)
  await delProject(row.id).then(res => {
    console.log(res)
    ElNotification({
      title: '删除项目组',
      message: h('i', { style: 'color: teal' }, res.data.data),
    })
  })
  await getProject().then(res => {
    existingList.value = res.data.data
  })
}
import { addProject, editProject } from '@/api/equipment/tactics'
import { ElMessage, ElNotification } from 'element-plus';
async function handleFormData(data) {
  console.log(activeName.value)
  if (activeName.value == 'new') {
    await addProject(data).then(res => {
      console.log(res)
      ElNotification({
        title: '新增项目组',
        message: h('i', { style: 'color: teal' }, res.data.data),
      })
    })
  } else if (activeName.value == 'edit') {
    console.log(data)
    await editProject(data).then(res => {
      console.log(res)
      ElNotification({
        title: '编辑项目组',
        message: h('i', { style: 'color: teal' }, res.data.data),
      })
    })
  } else {
    ElMessage.error('页面标签有误')
  }
  activeName.value = 'existing'
  await getProject().then(res => {
    console.log(res)
    existingList.value = res.data.data
  })
}
function cancelEdit() {
  activeName.value = 'existing'
}
</script>
<style scoped lang="less">
.el-row {
  margin-top: 20px;
}

.el-dialog {
  .el-form {
    margin: 10px 20px;
  }
}

:deep(th.el-table__cell) {
  background-color: var(--el-color-primary-light-7);
}

.expand {

  :deep(td.el-table__cell) {
    background-color: var(--el-color-primary-light-9);
  }

}
</style>